<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drink Menu</title>
    <style>
        /* 针对一级菜单的样式 */
        ul.menu {
            list-style-type: none;
            padding: 0;
            display: flex; /* 使用flex布局让一级菜单在一行显示 */
        }
        ul.menu > li { /* 仅针对一级菜单项 */
            margin: 0;
            padding: 0;
            margin-right: 20px; /* 在一级菜单的每个菜单项之间添加20px的空格，最后一个元素不需要 */
        }
        ul.menu > li:last-child { /* 移除最后一个一级菜单项的右边距 */
            margin-right: 0;
        }

        /* 针对二级菜单的样式 */
        ul.menu ul {
            list-style-type: none; /* 移除二级菜单的列表样式 */
            padding-left: 20px; /* 为二级菜单添加缩进，使其看起来是子菜单 */
        }
        ul.menu ul li { /* 二级菜单项 */
            margin: 5px 0; /* 可选：为二级菜单项添加一些垂直间距 */
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>奶茶</li>
        <li>果茶</li>
        <li>咖啡
            <ul>
                <li>美式咖啡</li>
                <li>拿铁咖啡</li>
                <li>摩卡咖啡</li>
            </ul>
        </li>
    </ul>
</body>
</html>